<template>
	<view class="wrap">
		<template v-if="loadFlag">
			<view class="loadingTxt">
				<loading></loading>
			</view>
		</template>
		<template v-else>
			<view class="quesWrap padd">
				<view class="innerQues"
					v-for="(item,index) in queList"
					:key="index"
					v-show="(index+1) == currIndex"
				>
					<que-item 
						currPage="errBookPage"
						:item="item" 
						:index="index" 
						:currIndex="currIndex" 
						@selectOption="selectOption"
						@selectMultiOption="selectMultiOption"
						@selectTkOpt="selectTkOpt"
					></que-item>
				</view>
			</view>
			<view class="queBot" v-if="completeStatus !== 2">
				<!-- v-if="completeStatus == 0" -->
				<button class="comBtn" :loading="isDisableFlag" :disabled="isDisableFlag" @tap="submitQueRes" v-if="completeStatus === 0">{{btnTit}}</button>
				<button class="comBtn reset" :loading="isDisableFlag" :disabled="isDisableFlag" @tap="againDoThis" v-else>重新订正</button>
			</view>
			<!-- 答题卡 -->
			<tui-bottom-popup :show="popupShow" :radius="radius" @close="hidePopup">
				<view class="popuoView">
					<que-res :ansRightFlag="ansRightFlag" currPage="errBook"></que-res>
				</view>
			</tui-bottom-popup>
		</template>
	</view>
</template>

<script>
	import QueItem from '../queList/components/QueItem';
	import QueRes from '../queList/components/QueRes'
	import zhuxueUtils from '@/common/zhuxueUtils.js'
	import { getMyErrBookDet,submitErrBook } from '@/api/zhuxue.js'
	export default {
		components:{
			QueItem,
			QueRes
		},
		data(){
			return{
				loadFlag:true,
				completeStatus:0,//记录每道题的是否已做0 未做 1已做(错) 2已做(对) 
				loreErrId:0,
				currIndex:1,
				isDisableFlag:false,
				radius:true,
				popupShow:false,
				//popOpt:'',//queCard queRes
				ansRightFlag:null,//回答正确/错误的flag 用于显示底部弹层(每道题)
				multiArr:[],//用于存储多选题的选项
				//completeStatus:-1,//记录每道题的是否已做0 未做 1已做
				queList:[],
				btnTit:'提交本题'
			}
		},
		onLoad(options){
			this.loreErrId = options.loreErrId;
			this.loadMyErrBookDet();
		},
		methods:{ 
			hidePopup(){
				this.popupShow = false;
			},
			loadMyErrBookDet(){
				let field = { loreErrorId:this.loreErrId };
				this.loadFlag = true;
				getMyErrBookDet(field).then(res=>{
					let reg = new RegExp("Module/", "g");
					let tmpRes = res.data.datas;
					let lqList = [];
					this.loadFlag = false;
					this.btnTit = '提交本题';
					this.completeStatus = 0;
					lqList.push(tmpRes);
					lqList.forEach((item,i)=>{
						lqList[i].answerOptionArray = zhuxueUtils.assignToArray(lqList[i].a,lqList[i].b,lqList[i].c,lqList[i].d,lqList[i].e,lqList[i].f);
						lqList[i].lqType = lqList[i].questionType;
						lqList[i].completeStatus = 0;
						lqList[i].lqSub = lqList[i].subjectName;
						if(lqList[i].lqSub.indexOf('Module/') != -1){
							lqList[i].lqSub = lqList[i].lqSub.replace(reg, this.zhuXueServer + '/Module/');
						}
						lqList[i].optIndex = -1;//单选题 判断题 下标
						lqList[i].currAns = '';
						lqList[i].result = -1;//0->错 1对 每道题提交后记录当前回答是否正确
						if(lqList[i].lqType == '单选题' ||　lqList[i].lqType == '判断题'){
							lqList[i].myAnsSingleIndex = -1;
						}else if(lqList[i].lqType == '多选题'){
							lqList[i].multiOptIndexArr = [];
							for(var j=0;j<lqList[i].answerOptionArray.length;j++){
								var tmpObj = {
									selFlag:false
								};
								lqList[i].multiOptIndexArr.push(tmpObj)
							}
						}else if(lqList[i].lqType == '填空选择题'){
							lqList[i].tkOptIndexArr = [];
							for(var j=0;j<lqList[i].answerNum;j++){
								var tmpObj = {
									tkIndex:-1,
									value:''
								};
								lqList[i].tkOptIndexArr.push(tmpObj);
							}
						}
					})
					this.queList = lqList;
				}).catch(err=>{this.loadFlag = false;})
			},
			againDoThis(){
				this.loadMyErrBookDet();
			},
			submitQueRes(){
				var tmpIndex = Number(this.currIndex-1);
				var dxFlag = true,multiResFlag = true,tkResFlag = true;
				var tmpList = this.queList[tmpIndex];
				if(tmpList.lqType == '单选题' || tmpList.lqType == '判断题'){
					if(tmpList.currAns == ''){
						this.util.showToast('请选择答案');
						dxFlag = false;
						return;
					}
				}else if(tmpList.lqType == '多选题'){
					if(this.multiArr.length == 0){
						this.util.showToast('请完善选项答案');
						multiResFlag = false;
						return;
					}
					tmpList.currAns = this.multiArr.join(',');
				}else if(tmpList.lqType == '填空选择题'){
					var tmpTkArr = tmpList.tkOptIndexArr;
					for(var i=0;i<tmpTkArr.length;i++){
						if(tmpTkArr[i].tkIndex == -1){
							tkResFlag = false;
						}
					}
					if(!tkResFlag){
						this.util.showToast('请完善选项答案');
						return;
					}
					const newArr = tmpTkArr.map(item=>{
						return item.value;
					});
					tmpList.currAns = newArr.join(',');
				}
				let field = { loreErrorId:this.loreErrId,myAnswer:tmpList.currAns };
				console.log(field);
				this.isDisableFlag = true;
				this.btnTit = '提交中...';
				submitErrBook(field).then(res=>{
					this.popupShow = true;
					console.log(res);
					var studyResult = res.data.datas.result;
					if(studyResult == 1){//做对
						this.completeStatus = 2;
						this.ansRightFlag = true;
						this.$set(tmpList,'result',1);
						//订正正确自动刷新上一list页面接口
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.isRefreshFlag = true;
					}else{
						this.completeStatus = 1;
						this.ansRightFlag = false;
						this.$set(tmpList,'result',0);
					}
					if(tmpList.lqType == '单选题' || tmpList.lqType == '判断题'){//更新当前的索引
						tmpList.myAnsSingleIndex = tmpList.optIndex;
					}else if(tmpList.lqType == '多选题'){//selFLag
						var myAnsIndexArr = [];
						for(var k=0;k<this.multiArr.length;k++){
							myAnsIndexArr.push(zhuxueUtils.transOptToNums(this.multiArr[k]));
						}
						for(var f=0;f<tmpList.multiOptIndexArr.length;f++){
							for(var g=0;g<myAnsIndexArr.length;g++){
								if(f == myAnsIndexArr[g]){
									tmpList.multiOptIndexArr[f].selFlag = true;
								}
							}
						}
					}
					setTimeout(()=>{
						this.isDisableFlag = false;
						this.popupShow = false;
						this.multiArr = [];
					},1200);
				}).catch(err=>{
					this.btnTit = '提交本题';
					this.isDisableFlag = false;
					console.log(err);
				})
			},
			//单选题/判断题点击某一项赋予active
			selectOption(index,currNum,myAns){
				this.queList[index].optIndex = currNum;
				this.queList[index].currAns = myAns;
			},
			//多选题点击某几项
			selectMultiOption(index,innerIndex,myAns){
				var item = this.queList[index].multiOptIndexArr[innerIndex];
				if(item.selFlag == true){
					this.$set(item,'selFlag',false);
					for(var i=0;i<this.multiArr.length;i++){
						if(myAns == this.multiArr[i]){
							this.multiArr.splice(i,1);
						}
					}
				}else if(item.selFlag == false){
					this.$set(item,'selFlag',true)
					this.multiArr.push(myAns);
				}
			},
			//填空选择题每一项的点击
			selectTkOpt(index,ansNumIndex,jjIndex){
				var item = this.queList[index];
				this.$set(item.tkOptIndexArr[ansNumIndex],'tkIndex',jjIndex)//对象
				item.tkOptIndexArr[ansNumIndex].value = zhuxueUtils.transOptToWords(jjIndex);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.wrap{
		margin-top: 20rpx; 
		padding-bottom: 140rpx;
	}
	.queBot{
		height: 110rpx; 
		width: 100%;
		box-shadow: 0 -5rpx 8rpx rgba(0,0,0,.02);
		display: flex;
		align-items: center;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0rpx;
		z-index: 100; 
		.comBtn{
			width: 80%;
			margin: 0 auto;
			@include respTo(phone){
				height: 76rpx;
				line-height: 76rpx;
				font-size: $font-size32; 
			}
			@include respTo(pad){
				height: 70rpx;
				line-height: 70rpx;
				font-size: $padSize24; 
			}
			&.reset{
				background: lighten($pss-color-primary_1, $amount: 40);
				color: $pss-color-primary_1;
			}
		}
	}
</style>